import React from 'react'
import styles from './index.module.scss'
import FilterTitle from './FilterTitle'
import FilterPicker from './FilterPicker'
import FilterMore from './FilterMore'
import { getCurrentCity } from 'utils/city'
import http from 'utils/http'
import { Spring } from 'react-spring/renderprops'

// 用户选择的状态信息 => 一定是存在Filter组件中的
class Filter extends React.Component {
  state = {
    // 控制展示的是哪个内容
    // 如果是 area, mode, price  => FilterPicker展示
    // 如果是 more => FilterMore展示
    openType: '',
    // 控制子组件filterTitle的高亮状态的
    titleSelectedStatus: {
      area: false,
      mode: false,
      price: false,
      more: false,
    },
    openList: ['area', 'mode', 'price'],
    // 存放所有供用户选择的内容
    filtersData: {},
    // 这里的默认值, 推荐和将来渲染出来的不限的值统一
    selectedValues: {
      area: ['area', 'null'],
      mode: ['null'],
      price: ['null'],
      more: [],
    },
  }
  async componentDidMount() {
    const city = await getCurrentCity()
    const res = await http.get(`/houses/condition?id=${city.value}`)
    const { status, body } = res.data
    if (status === 200) {
      this.setState({
        filtersData: body,
      })
    }
  }
  changeType(type) {
    document.body.style.overflow = 'hidden'
    // 得到一个和原本一样的新对象
    const newTitleSelectedStatus = { ...this.state.titleSelectedStatus }
    newTitleSelectedStatus[type] = true

    this.setState({
      titleSelectedStatus: newTitleSelectedStatus,
      openType: type,
    })
  }
  // 取消
  cancel() {
    document.body.style.overflow = ''
    this.setState(
      {
        openType: '',
      },
      () => {
        this.setHighLight()
      }
    )
  }
  // 确认, 请注意, 确认时, 是需要将选择的内容传递上来的
  // 会根据对应的openType, 将选中的值, 存到 selectedValues 里面去的
  submit(value) {
    document.body.style.overflow = ''
    // 将来这边是要收集选择的信息的
    // 需要将得到的value, 收集到 state 中的一个对象中去, 将来还要根据这个对象发送请求的
    const { openType } = this.state
    const newSelectedValues = { ...this.state.selectedValues }
    newSelectedValues[openType] = value

    this.setState(
      {
        openType: '',
        selectedValues: newSelectedValues,
      },
      () => {
        // 等用户选择完成了, 根据选择完成了后的selectedValues, 确定需要高亮的title
        this.setHighLight()
        // 将修改后的筛选条件, 传递给父组件
        this.props.filterChange(newSelectedValues)
      }
    )
  }

  // 作用: 设置高亮 (根据selectedValues)
  // 如果 selectedValues 的对应值是默认值(不限), 不需要高亮
  // 如果 selectedValues 的对应值不是默认值, 说明用户选了, 需要高亮
  setHighLight() {
    const { selectedValues, titleSelectedStatus } = this.state
    const newTitleSelectedStatus = { ...titleSelectedStatus }
    // 遍历selectedValues(当时选中的数据), 将里面的每一项和之前的默认值比较
    // ['area', 'mode', 'more', 'price']
    Object.keys(selectedValues).forEach((item) => {
      const value = selectedValues[item].toString()
      // 标记是否是默认值
      let flag = true
      // 对每一项, 都判断, 是否是默认值
      switch (item) {
        case 'area':
          flag = value === 'area,null' || value === 'subway,null'
          break
        case 'mode':
          flag = value === 'null'
          break
        case 'price':
          flag = value === 'null'
          break
        case 'more':
          flag = value === ''
          break
        default:
          break
      }

      // 将当前这一项是否要高亮的值, 存到newTitleSelectedStatus中
      newTitleSelectedStatus[item] = !flag
    })

    // 更新到state中即可
    this.setState({
      titleSelectedStatus: newTitleSelectedStatus,
    })
  }

  renderFilterPicker() {
    const { openList, openType, filtersData, selectedValues } = this.state
    // 需要根据不同的openType, 传入不同的cols 和 数据data
    const { area, subway, rentType, price } = filtersData
    let cols, data
    let defaultValues = selectedValues[openType]
    switch (openType) {
      case 'area':
        cols = 3
        data = [area, subway]
        break
      case 'mode':
        cols = 1
        data = rentType
        break
      case 'price':
        cols = 1
        data = price
        break
      default:
        break
    }

    // 渲染时, 只要发现key变了, 那么这个组件, 就不再复用, 会销毁重建
    // 如果希望一个组件不被复用, 就希望这个组件重新构建, 重新执行constructor, 可以渲染时加上不同的key
    return (
      openList.includes(openType) && (
        <FilterPicker
          key={openType}
          defaultValues={defaultValues}
          cols={cols}
          data={data}
          cancel={this.cancel.bind(this)}
          submit={this.submit.bind(this)}
        ></FilterPicker>
      )
    )
  }

  renderFilterMore() {
    const { openType, filtersData, selectedValues } = this.state
    const { characteristic, floor, oriented, roomType } = filtersData
    // 渲染filterMore还需要准备默认值
    const defaultValues = selectedValues['more']
    return (
      <FilterMore
        {...{ characteristic, floor, oriented, roomType }}
        defaultValues={defaultValues}
        cancel={this.cancel.bind(this)}
        submit={this.submit.bind(this)}
        openType={openType}
      ></FilterMore>
    )
  }

  renderMask() {
    const { openType, openList } = this.state
    const isShowMask = openList.includes(openType)

    return (
      <Spring
        from={{ opacity: 0 }}
        to={{ opacity: isShowMask ? 1 : 0 }}
        config={{ duration: 500 }}
      >
        {(props) => {
          if (props.opacity === 0) return null
          return (
            <div
              style={props}
              className="mask"
              onClick={this.cancel.bind(this)}
            />
          )
        }}
      </Spring>
    )

    // return (
    //   isShowMask && <div className="mask" onClick={this.cancel.bind(this)} />
    // )
  }

  render() {
    const { titleSelectedStatus } = this.state

    return (
      <div className={styles.filter}>
        {this.renderMask()}

        <div className="content">
          <FilterTitle
            changeType={this.changeType.bind(this)}
            titleSelectedStatus={titleSelectedStatus}
          ></FilterTitle>

          {this.renderFilterPicker()}

          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}

export default Filter
